<template>
  <div class="container mx-auto">
    <!-- 页面标题 -->
    <div class="mb-6">
      <p class="text-gray-500 mt-1">管理碳积分交易平台的所有功能</p>
    </div>

    <!-- 统计卡片 -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
      <div class="bg-white rounded-lg shadow p-6 transform transition-transform hover:scale-105">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-gray-500 text-sm">总厂商数</p>
            <h3 class="text-2xl font-bold text-gray-800 mt-1">128</h3>
          </div>
          <div class="w-12 h-12 rounded-full bg-emerald-100 flex items-center justify-center text-emerald-600">
            <i class="fa fa-industry text-xl"></i>
          </div>
        </div>
        <div class="mt-4 text-sm">
          <span class="text-green-500 flex items-center">
            <i class="fa fa-arrow-up mr-1"></i> 12% 较上月
          </span>
        </div>
      </div>

      <div class="bg-white rounded-lg shadow p-6 transform transition-transform hover:scale-105">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-gray-500 text-sm">总用户数</p>
            <h3 class="text-2xl font-bold text-gray-800 mt-1">3,542</h3>
          </div>
          <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
            <i class="fa fa-users text-xl"></i>
          </div>
        </div>
        <div class="mt-4 text-sm">
          <span class="text-green-500 flex items-center">
            <i class="fa fa-arrow-up mr-1"></i> 8% 较上月
          </span>
        </div>
      </div>

      <div class="bg-white rounded-lg shadow p-6 transform transition-transform hover:scale-105">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-gray-500 text-sm">总碳积分</p>
            <h3 class="text-2xl font-bold text-gray-800 mt-1">156,890</h3>
          </div>
          <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-green-600">
            <i class="fa fa-leaf text-xl"></i>
          </div>
        </div>
        <div class="mt-4 text-sm">
          <span class="text-green-500 flex items-center">
            <i class="fa fa-arrow-up mr-1"></i> 5% 较上月
          </span>
        </div>
      </div>

      <div class="bg-white rounded-lg shadow p-6 transform transition-transform hover:scale-105">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-gray-500 text-sm">今日交易量</p>
            <h3 class="text-2xl font-bold text-gray-800 mt-1">¥24,580</h3>
          </div>
          <div class="w-12 h-12 rounded-full bg-amber-100 flex items-center justify-center text-amber-600">
            <i class="fa fa-exchange text-xl"></i>
          </div>
        </div>
        <div class="mt-4 text-sm">
          <span class="text-red-500 flex items-center">
            <i class="fa fa-arrow-down mr-1"></i> 3% 较昨日
          </span>
        </div>
      </div>
    </div>

    <!-- 最近交易记录 -->
    <div class="bg-white rounded-lg shadow mb-8">
      <div class="p-6 border-b border-gray-200">
        <h3 class="text-lg font-semibold text-gray-800">最近交易记录</h3>
      </div>
      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
          <thead class="bg-gray-50">
          <tr>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">交易ID</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">买方</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">卖方</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">积分数量</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">交易金额</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">时间</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
          </tr>
          </thead>
          <tbody class="bg-white divide-y divide-gray-200">
          <tr v-for="item in recentTransactions" :key="item.id" class="hover:bg-gray-50">
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ item.id }}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ item.buyer }}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ item.seller }}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ item.amount }}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">¥{{ item.money.toFixed(2) }}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ item.time }}</td>
            <td class="px-6 py-4 whitespace-nowrap">
                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                  已完成
                </span>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 最近交易记录模拟数据
const recentTransactions = ref([
  { id: 'TX20250908001', buyer: '恒通制造', seller: '绿色能源', amount: 500, money: 29300, time: '2025-09-08 10:23' },
  { id: 'TX20250908002', buyer: '东方化工', seller: '环保建材', amount: 300, money: 18060, time: '2025-09-08 09:15' },
  { id: 'TX20250907056', buyer: '南方电子', seller: '可持续农业', amount: 800, money: 38800, time: '2025-09-07 16:42' },
  { id: 'TX20250907055', buyer: '华宇集团', seller: '蓝天制造', amount: 1200, money: 74760, time: '2025-09-07 14:30' },
]);
</script>